<template>
	<div class="progress">
		<div v-for="item in progress" :key="item.taskId" class="progress-item">
			<div>
				<div class="item-user">
					<div class="item-user-avatar">
						<template v-if="item.user">
							<avatar :show-name="false" :status="getStatus(item)" :name="item.user.name" :src="baseURL + item.user.avatar"></avatar>
						</template>
						<template v-else>
							<span v-if="item.nodeType === 'APPROVAL'" class="iconfont icon-huiyi multi-user-avatar"></span>
							<icon v-else name="el-icon-promotion multi-user-avatar"></icon>
						</template>
					</div>
					<div :class="{ 'item-user-desc': true, subprocess: item.nodeType === 'SUBPROC' }" @click="showItemNode(item)">
						<div>
							{{ item.name }}
							<span v-if="item.nodeType === 'SUBPROC'" style="margin-left: 10px"> <icon name="el-icon-view"></icon> 查看 </span>
						</div>
						<div>{{ getDesc(item) }}</div>
					</div>
				</div>
				<div class="time">
					{{ getShortTime(item.finishTime) }}
				</div>
			</div>
			<div v-if="item.users && item.users.length > 0" class="multi-user">
				<div v-for="subItem in item.users" :key="subItem.taskId" class="">
					<div class="item-user-avatar">
						<avatar showY :size="35" :status="getStatus(subItem)" :name="subItem.user.name" :src="subItem.user.avatar"></avatar>
					</div>
				</div>
			</div>
			<div v-show="(item.comment && item.comment.length > 0) || item.signature" class="user-comment">
				<div v-if="item.signature" style="display: flex; align-items: center">
					<span><icon name="el-icon-editpen"></icon> 签字：</span>
					<img :src="item.signature" style="width: 140px; height: 60px" />
				</div>
				<div v-for="cmt in item.comment" :key="cmt.id" style="position: relative">
					<div class="user-comment-user" v-if="item.users">
						<avatar :size="30" :name="cmt.user.name" :src="cmt.user.avatar"></avatar>
						<span>（添加了评论）</span>
					</div>
					<div class="user-comment-time" v-if="item.users">
						{{ getShortTime(cmt.createTime) }}
					</div>
					<div class="user-comment-content">
						<div class="text-comment">{{ cmt.text }}</div>
						<div class="image-comment" v-show="cmt.attachments.length > 0">
							<el-image
								class="image"
								:src="img"
								v-for="(img, i) in filterImages(cmt.attachments)"
								:key="img"
								:preview-src-list="filterImages(cmt.attachments)"
							></el-image>
						</div>
						<div class="file-comment">
							<ellipsis
								style="display: inline-block"
								class="file-item"
								type="primary"
								@click="download(file)"
								:content="file.name"
								v-for="file in filterFiles(cmt.attachments)"
								:key="file.id"
							>
								<template #pre>
									<icon name="el-icon-document"></icon>
								</template>
							</ellipsis>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="progress-item end-process">
			<div class="item-user-avatar node-icon">
				<icon :key="statusIcon" :name="`${statusIcon} multi-user-avatar`"></icon>
			</div>
			<div class="item-user-desc" style="font-size: 16px; line-height: 34px">
				{{ status }}
			</div>
		</div>
		<el-drawer :size="isMobile ? '100%' : '500px'" append-to-body direction="rtl" title="子流程详情" v-model="showSubProc">
			<instance-view :instance-id="subProcInst"></instance-view>
		</el-drawer>
	</div>
</template>

<script>
import { getTaskResult } from '@/views/workflow/utils/ProcessUtil.js';
import { defineAsyncComponent } from 'vue';

export default {
	name: 'ProcessProgress',
	components: { InstanceView: defineAsyncComponent((_) => import('./ProcessInstancePreview.vue')) },
	props: {
		progress: {
			type: Array,
			required: true,
			default: () => {
				return [];
			},
		},
		result: {
			required: true,
			default: null,
		},
		status: {
			required: true,
			default: '未知',
		},
	},
	computed: {
		isMobile() {
			return window.screen.width < 450;
		},
		statusIcon() {
			switch (this.result) {
				case 'RUNNING':
					return 'el-icon-morefilled icon-morefilled';
				case 'COMPLETE':
					return 'el-icon-morefilled icon-morefilled';
				case 'PASS':
					return 'el-icon-successfilled icon-success';
				case 'CANCEL':
					return 'el-icon-circleclose icon-circleclose';
				case 'REFUSE':
					return 'el-icon-circleclosefilled icon-error';
			}
		},
	},
	data() {
		return {
			showSubProc: false,
			subProcInst: null,
		};
	},
	methods: {
		filterImages(attachments) {
			return (attachments || [])
				.filter((f) => f.isImage)
				.map((f) => {
					return this.$getRes(f.url);
				});
		},
		filterFiles(attachments) {
			return (attachments || [])
				.filter((f) => !f.isImage)
				.map((f) => {
					return { ...f, url: this.$getRes(f.url) };
				});
		},
		download(file) {
			window.open(`${this.$getRes(file.url)}?name=${file.name}`, '_blank');
		},
		showItemNode(item) {
			if (item.nodeType === 'SUBPROC') {
				this.subProcInst = item.taskId;
				this.showSubProc = true;
			}
		},
		getSize(size) {
			if (size > 1048576) {
				return (size / 1048576).toFixed(1) + 'MB';
			} else if (size > 1024) {
				return (size / 1024).toFixed(1) + 'KB';
			} else {
				return size + 'B';
			}
		},
		getShortTime(time) {
			if (time) {
				return time.substring(5, 16);
			}
			return '处理中';
		},
		getStatus(item) {
			if (item.finishTime === null) {
				return 'pending';
			} else if (item.nodeType === 'CC') {
				return 'cc';
			} else if (item.result === 'agree') {
				return 'success';
			} else if (item.result === 'refuse') {
				return 'error';
			} else if (item.result === 'comment') {
				return 'comment';
			} else if (item.result === 'transfer') {
				return 'transfer';
			} else if (item.result === 'recall') {
				return 'recall';
			} else if (item.nodeType === 'cancel') {
				return 'cancel';
			} else {
				return undefined;
			}
		},
		getDesc(item) {
			if (item.nodeType === 'ROOT') {
				return item.user.name;
			} else if (item.nodeType === 'APPROVAL') {
				if (item.user) {
					return `${item.user.name}（${getTaskResult(item).text}）`;
				}
				let desc = (item.users || []).length + '人（';
				switch (item.approvalMode) {
					case 'AND':
						return desc + '会签）';
					case 'OR':
						return desc + '或签）';
					case 'NEXT':
						return desc + '顺序会签）';
				}
			} else if (item.nodeType === 'CC') {
				if (item.user) {
					return `抄送 ${item.user.name}`;
				}
				return `抄送 ${item.users.length}人`;
			} else if (item.nodeType === 'SUBPROC') {
				switch (item.result) {
					case 'agree':
						return `${item.user.name} 发起的子流程（审批通过）`;
					case 'cancel':
						return `${item.user.name} 发起的子流程（被撤销）`;
					case 'refuse':
						return `${item.user.name} 发起的子流程（被驳回）`;
					default:
						return `${item.user.name} 发起的子流程（正在处理中）`;
				}
			} else if (item.result === 'comment') {
				return `${item.user.name}（添加了评论）`;
			}
		},
	},
};
</script>

<style lang="less" scoped>
.progress {
	position: relative;
}

.subprocess {
	cursor: pointer;
	border-radius: 5px;
	&:hover {
		background: @theme-aside-bgc;
		color: @theme-primary;
	}
}

.progress::after {
	content: '';
	position: absolute;
	width: 4px;
	top: 0;
	left: 18px;
	color: #e4e4e4;
	background: #e4e4e4;
	height: 100%;
}
.end-process {
	height: 40px;
	.node-icon {
		span {
			font-size: 30px;
		}
		.icon {
			left: 0 !important;
			top: 0 !important;
		}
		.icon-success {
			color: @theme-success !important;
			background: white !important;
		}
		.icon-error {
			color: @theme-danger !important;
			background: white !important;
		}
		.icon-circleclose {
			color: #979797 !important;
			background: white !important;
		}
		.icon-morefilled {
			color: #b0b0b0 !important;
			background: #e4e4e4 !important;
		}
	}
}
.progress-item {
	z-index: 1;
	margin-bottom: 30px;
	position: relative;
	.item-user {
		& > div {
			display: inline-block;
		}
	}

	.user-comment {
		margin-left: 60px;
		font-size: 14px;
		position: relative;
		box-sizing: unset;
		padding-top: 5px;
		.user-comment-user {
			display: flex;
			align-items: center;
		}
		:deep(.a-img span) {
			font-size: 12px;
		}
		.user-comment-time {
			position: absolute;
			right: 8px;
			top: 7px;
			color: #8c8c8c;
			font-size: small;
		}
		.user-comment-content {
			margin: 5px 0;
			background: #eeeeee;
			box-sizing: unset;
			padding: 5px 20px;
			border-radius: 0 5px 5px 5px;

			:deep(.image-comment) {
				box-sizing: unset;
				padding: 5px 0;
				.image {
					height: 60px;
					width: 60px;
					box-sizing: unset;
					padding: 5px;
				}
				img {
					border-radius: 5px;
				}
			}
			.file-comment {
				.file-item {
					color: @theme-primary;
					cursor: pointer;
				}
			}
		}
	}

	.item-user-avatar {
		background: white;
		position: relative;
		box-sizing: unset;
		padding: 4px 0;

		:deep(.icon) {
			border-radius: 50%;
			font-size: 15px;
			color: white;
			border: 2px solid white;
			position: absolute;
			padding: 0px;
			right: -10px;
			top: 20px;
		}

		.el-icon-promotion {
			padding: 1px;
			font-size: 12px;
		}
		.el-icon-more {
			color: white;
			font-size: 6px !important;
		}

		.multi-user-avatar {
			display: flex;
			height: 40px;
			width: 40px;
			background: @theme-primary;
			color: white;
			font-size: 28px;
			border-radius: 50%;
			justify-content: center;
			align-items: center;
			right: -43px;
			top: -5px;
		}
	}

	.item-user-desc {
		position: absolute;
		left: 60px;
		top: 5px;
		font-size: 14px;

		div:nth-child(1) {
			color: #8c8c8c;
		}

		div:nth-child(2) {
			font-size: 15px;
			color: black;
		}
	}
}
.time {
	font-size: 15px;
	color: #8a8a8a;
	position: absolute;
	right: 0;
	top: 0;
}
.multi-user {
	margin-top: 25px;
	display: grid;
	margin-left: 50px;
	grid-template-columns: repeat(7, 60px);
	/*.item-user-avatar {
    :deep(.icon) {
      right: 2px;
    }
  }*/
}
</style>
